<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>移动端测试01</title>
    <style type="text/css">
        body{ margin: 0; padding: 0; }
    </style>
    <link rel="stylesheet" type="text/css" href="./index02.css">
</head>
<body>

<!-- 轮播图 -->
<div class="banner-mod banner-mod1">
    <div class="banner-item-box">
        <div class="banner-item">
            <img class="banner-img" src="https://img.alicdn.com/imgextra/i3/6000000005839/O1CN01PNhlN61t0JK4NDJLF_!!6000000005839-0-lubanimage.jpg">
        </div>
        <div class="banner-item">
            <img class="banner-img" src="https://img.alicdn.com/imgextra/i2/6000000001221/O1CN01MwNClV1KtGIC8JMLp_!!6000000001221-0-lubanimage.jpg">
        </div>
        <div class="banner-item">
            <img class="banner-img" src="https://img.alicdn.com/imgextra/i1/6000000002639/O1CN01laZY771VMhunR5dkv_!!6000000002639-0-lubanimage.jpg">
        </div>
    </div>
    <div class="banner-btn-box">
        <span class="banner-btn"></span>
        <span class="banner-btn"></span>
        <span class="banner-btn"></span>
    </div>
</div>
<script>
const BannerList = function($dom) {
    this.$dom = $dom;

    this.init();
};
BannerList.prototype = {
    interval: 3000,
    currentIndex: 0,
    maxIndex: 0,
    init: function() {
        this.$dom.addEventListener('click', (e) => {
            //事件委托到 banner-btn 节点
            if(e.target.classList.contains('banner-btn')) {
                let index = this.getIndexFromDom(e.target);
                this.setActive(index);
                this.startInterval();
            }
        });
        let maxLen = this.$dom.querySelectorAll('.banner-item').length;
        if(maxLen) {
            this.maxIndex = maxLen - 1;
        }
        
        this.setActive(this.currentIndex);
        this.startInterval();
    },
    removeActive: function(index) {
        let dom1 = this.$dom.querySelector('.banner-item.active');
        let dom2 = this.$dom.querySelector('.banner-btn.active');
        if(dom1) {
            dom1.classList.remove('active');
        }
        if(dom2) {
            dom2.classList.remove('active');
        }
    },
    //获取点击元素的下标位置
    getIndexFromDom: function(dom)  {
        let index = 0;
        let elem = dom;

        while(elem.previousElementSibling) {
            index++;
            elem = elem.previousElementSibling;
        }

        return index;
    },
    setActive: function(index) {
        this.removeActive();
        this.currentIndex = index;
        this.$dom.querySelectorAll('.banner-item')[index].classList.add('active');
        this.$dom.querySelectorAll('.banner-btn')[index].classList.add('active');
    },
    startInterval: function() {
        clearInterval(this.timeId);
        this.timeId = setInterval(() => {
            this.setActive(this.getNextIndex());
        }, this.interval);
    },
    getNextIndex: function() {
        let newIndex = 0;
        if(this.currentIndex == this.maxIndex) {
            newIndex = 0;
        }else {
            newIndex = this.currentIndex + 1;
        }
        return newIndex;
    },
};
const obj1 = new BannerList(document.querySelector('.banner-mod'));
</script>


<!-- 9宫格功能区 -->
<div class="fun-list-mod">
    <div class="fun-box">
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">
                <p class="fun-msg">天猫新品2</p>
            </a>
        </div>
        <div class="fun-item">
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款1</p>
            </a>
            <a href="javascript:void(0)" class="fun-href">
                <img class="fun-img" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1">
                <p class="fun-msg">今日爆款2</p>
            </a>
        </div>
    </div>
</div>


</body>
</html>
